<template>
  <div @click="_thisIconClick">
    <ul ref="waves" class="movement">
      <li class="li1"><span class="ani-li"></span></li>
      <li class="li2"><span class="ani-li"></span></li>
      <li class="li3"><span class="ani-li"></span></li>
      <li class="li4"><span class="ani-li"></span></li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'miniPlayer',
  data() {
    return {
      src: ''
    }
  },
  mounted() {
    var list = this.$refs.waves.children
    if (!this.playing) {
      for (let i = 0; i < list.length; i++) {
        list[i].firstChild.classList.add('pause')
      }
    } else {
      for (let i = 0; i < list.length; i++) {
        list[i].firstChild.classList.remove('pause')
      }
    }
  },
  computed: {
    ...mapGetters([
      'playing',
      'playList'
    ])
  },
  watch: {
    playing() {
      var list = this.$refs.waves.children
      if (!this.playing) {
        for (let i = 0; i < list.length; i++) {
          list[i].firstChild.classList.add('pause')
        }
      } else {
        for (let i = 0; i < list.length; i++) {
          list[i].firstChild.classList.remove('pause')
        }
      }
    }
  },
  methods: {
    _thisIconClick () {
      if (this.playList.length > 0) {
        var flag = true
        this.setFunScreen(flag)
      }
    },
    ...mapMutations({
      setFunScreen: 'SET_FULL_SCREEN'
    })
  }
}
</script>

<style scoped>
.movement {
    width: 52px;
    height: 50px;
}
.movement li {
  position: relative;
  float: left;
  height: 25px;
  margin-right: 3px;
  width: 3px;
  overflow: hidden;
  top: 13px;
  left: 32px;
}
.movement li span {
    position: absolute;
    bottom: 0;
    display: block;
    height: 100%;
    width: 100px;
    background: radial-gradient(transparent 50%, rgba(38, 32, 32, 0.9) 100%);
}
.li1 span {
  animation: waves 0.6s linear 0s infinite alternate;
  -webkit-animation: waves 0.6s linear 0s infinite alternate;
  height: 60%!important;
}

 .li2 span {
  animation: waves 0.9s linear 0s infinite alternate;
  -webkit-animation: waves 0.9s linear 0s infinite alternate;
  height: 90%!important;
}
 .li3 span {
  animation: waves .8s linear 0s infinite alternate;
  -webkit-animation: waves .8s linear 0s infinite alternate;
  height: 50%!important;
}
 .li4 span {
  animation: waves .5s linear 0s infinite alternate;
  -webkit-animation: waves .5s linear 0s infinite alternate;
  height: 70%!important;
}
@keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}
.pause{
  animation-play-state: paused!important;
}
</style>
